<template>
	<div class="bg-white"  style="width: 72%; margin: 0 auto;">
		<el-carousel :interval="4000" type="card" height="300px">
			<el-carousel-item v-for="item in items" :key="item" class="pic-item">
				<div style="background:#FFF; color:#000;position:absolute;">
				<label style="">{{ item.intro }}</label>
				</div>
				<img class="d-flex w-100 h-100" alt="item.name" :src="item.picture" />
			</el-carousel-item>
		</el-carousel>
	<div style="width: 72%; margin: 0 auto;">
		<el-row type="flex" justify="space-around" :gutter="20">
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header">
						<span>消息</span>
						<router-link class="nav-link" style="text-decoration: none; float:right; padding: 3px 0"
							to="/article/list">
							查看更多</router-link>
					</div>
					
						<el-popover trigger="hover"
							placement="top"
							width="160"  v-for="article in articles.slice(0,6)" :key="article"
							v-model="visible">
							<el-tag v-for="tag in article.tags" :key="tag" style="margin:0 0.1rem;display:flex:flex-wrap:wrap">{{tag}}</el-tag>
						<el-button slot="reference" v-if="article.check=='通过'" type="text" @click="gotoArticle(article._id)">
							{{article.title|ellipsis}}
						</el-button>
					</el-popover>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header">
						<span>成果展示</span>
						<router-link class="nav-link" style="text-decoration: none; float:right; padding: 3px 0"
							to="/achievement/list">
							查看更多</router-link>
					</div>
					<div v-for="item in achievement.slice(0,6)" :key="item" class="text item">
						<el-button type="text" v-if="item.check=='通过'" @click="gotoAchievement(item._id)">{{item.name}}</el-button>
					</div>
				</el-card>
			</el-col>

		</el-row>
		
		<el-divider></el-divider>

		<el-row>
			<el-header>赛事信息</el-header>
			<el-col :span="8" v-for="item in contests" :key="item">
				
					<div v-if="item.check=='通过'">
				<el-card class="box-card">
						<el-image :src="item.logo"  style="height: 5rem;" alt="logo"/>
						<span>{{item.name}}</span>
						<el-button type="text" class="button" @click="gotoContest(item._id)">查看内容
						</el-button>
				</el-card></div>
			</el-col>
		</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		filters: {
			ellipsis (value) {
				if (!value) return ''
				else if (value.length >25) {
					return value.slice(0,25) + '...'
				}
				return value
				}
		},
		data() {
			return {
				activeName: '1',
				articles: [],
				items: [],
				contests:[],
				achievement:[],
				visible: false,
			}
		},
		methods: {
			async fetch() {
				const res1 = await this.$http.get(`rest/rotate/`)
				this.items = res1.data
				for(var i=0;i<this.items.length;i++)
					this.getFilePath(this.items[i].picture.substring(22,this.items[i].picture.length))
				const res2 = await this.$http.get(`rest/articles/`)
				this.articles = res2.data
				
				const res3 = await this.$http.get(`rest/contests/`)
				this.contests = res3.data
				for(var k=0;k<this.contests.length;k++)
					this.getFilePath(this.contests[k].logo.substring(22,this.contests[k].logo.length))
				const res4 = await this.$http.get(`rest/achievement/`)
				this.achievement = res4.data
				console.log(this.items[0])
			},
			async gotoArticle(id) {
				this.$router.push(`/article/${id}`)
			},
			async gotoContest(id){
				this.$router.push(`/contest/${id}`)
			},
			async gotoAchievement(id){
				this.$router.push(`/achievement/${id}`)
			},
			getFilePath(key) {
				return document.location.protocol.indexOf('https') === -1 ? `http://file.szuet.ltd/${key}` : `https://www.szuet.ltd/docs/${key}`
			}
		},
		created() {
			this.fetch()
		}
	}
</script>

<style lang="scss">
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}
	
	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.pic_item {
		position: relative;
		height: 100%;
	}

	.pic_item label {
		position: absolute;
		left: 2rem;
		bottom: 2rem;
	}
</style>
